<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Expires" content="Mon, 26 Jul 1997 05:00:00 GMT" /> 
<meta http-equiv="Pragma" content="no-cache" /> 
<title>HugoNews</title>
<link type="text/css" rel="stylesheet" href="css/jquery/smoothness/jquery-ui-1.8.17.custom.css" />
<link type="text/css" rel="stylesheet" href="css/hm/style.css" />
<link type="text/css" rel="stylesheet" href="css/hm/mapped.css" />


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/extern/beautify/beautify-html.js"></script>

<script type="text/javascript" src="js/hm/ui/ui.actions.js"></script>
<script type="text/javascript" src="js/hm/ui/ui.mapped.js"></script>
<script type="text/javascript" src="js/hm/helper/view.js"></script>
<script type="text/javascript" src="js/hm/helper/i18n.js"></script>
<script type="text/javascript" src="js/hm/app.js"></script>
<script type="text/javascript" src="js/hm/conf.js"></script>
<script type="text/javascript">
	/*
	$(document).ready(function() {
		$('#source').bind('keyup', function(event){
			$('#dest').html($(this).val());
			$('img').bind('click', function(){
				alert($(this).attr('src'));
			})
			.resizable();
		});
	});
	
	function beautify(source) {
		$(source).val(
			style_html($(source).val(), {
				'indent_size': 4,
		   		'indent_char': ' ',
		   		'max_char'   : 999,
		   		'brace_style': 'expand'
			})
		);		
	}
	*/
	
</script>
</head>
	<body>
		<div class="main-frame">
			<div id="application">
				<ul id="tabs-items"></ul>
				<div id="app-tabs-container" class="tabs-content"></div>
				<div id="dropbox">
					<h1>Drop files here from your desktop</h1>
					<span>( multiple files allowed )</span>			
				</div>						
			</div>
			<div id="properties">
				<ul id="properties-tabs-items">
					<li><a href="#metrics">Metrics</a></li>
					<li><a href="#links">Links</a></li>
					<li><a href="#source">Source</a></li>
				</ul>
				<div id="prop-tabs-container" class="tabs-content">
					<form>
						<div id="metrics">
							<table width="100%">
								<tr>
									<td>Left - Right</td>
									<td>Top - Bottom</td>
								</tr>
								<tr>
									<td><input type="text" id="prop-left"/> - <input type="text" id="prop-width"/></td>
									<td><input type="text" id="prop-top"/> - <input type="text" id="prop-height"/></td>
								</tr>
							</table>
						</div>
					</form>
					<div id="links">
					
					</div>
					<div id="source">
						<textarea id="src" rows="5" cols="5"></textarea>
					</div>
				</div>
			</div>
		</div>
		<div id="upload-form" title="Select files for processing" style="display: none;">
			<form>
				<input type="file" id="files" multiple/>
				<output id="list"></output>
			</form>
		</div>
		
		<div id="property-dlg" title="Properties" style="display: none;">
			<div id="property">
				<h3><a href="#">Position</a></h3>
				<div>
					<table width="100%">
						<tr>
							<td class="prop-label"><label for="prop-left">Left:</label></td>
							<td class="prop-input"><input type="text" id="prop-left"/></td>
						</tr>
						<tr>
							<td class="prop-label"><label for="prop-top">Top:</label></td>
							<td class="prop-input"><input type="text" id="prop-top"/></td>
						</tr>
						<tr>
							<td class="prop-label"><label for="prop-width">Width:</label></td>
							<td class="prop-input"><input type="text" id="prop-width"/></td>
						</tr>
						<tr>
							<td class="prop-label"><label for="prop-height">Height:</label></td>
							<td class="prop-input"><input type="text" id="prop-height"/></td>
						</tr>
					</table>
				</div>
				<h3><a href="#">Links</a></h3>
				<div>
				<div id="property-nested">
					<h3><a href="#">Position</a></h3>
					<div>
						<table width="100%">
							<tr>
								<td class="prop-label"><label for="prop-left">Left:</label></td>
								<td class="prop-input"><input type="text" id="prop-left"/></td>
							</tr>
							<tr>
								<td class="prop-label"><label for="prop-top">Top:</label></td>
								<td class="prop-input"><input type="text" id="prop-top"/></td>
							</tr>
							<tr>
								<td class="prop-label"><label for="prop-width">Width:</label></td>
								<td class="prop-input"><input type="text" id="prop-width"/></td>
							</tr>
							<tr>
								<td class="prop-label"><label for="prop-height">Height:</label></td>
								<td class="prop-input"><input type="text" id="prop-height"/></td>
							</tr>
						</table>
					</div>
					<h3><a href="#">Links</a></h3>
					<div>
				</div>
			</div>
				</div>
			</div>
		</div>
		
		<div id="source-dlg" title="Source" style="display: none;">
			<!-- <div id="tab-content" class="ui-widget-content"> -->
				<textarea id="src" rows="20" cols="20"></textarea>
			<!-- </div> -->
		</div>
	</body>
</html>